<template>
	<div>
	<div class="tabs">
		<div>{{name}}执裁的赛事列表</div>
		<div class="search">
			<el-input v-model="form.keyword" @keyup.enter.native="onSubmit" placeholder="请输入赛事名称"></el-input>
			<el-button type="primary" class="button" @click="onSubmit">搜索</el-button>
		</div>
	</div>
	<div class="line"></div>
	<div class="matchList">
		<div class="matchLists" v-for="(itme, index) in MatchShowList" :key="index">
			<div class="left">
				<img :src="itme.logo" alt="">
				<div>
					<p class="title">{{itme.name}}</p>
					<p><span>主办单位：</span>{{itme.host}}</p>
					<p><span>比赛开始时间：</span>{{itme.start_time}}</p>
				</div>
			</div>
			<div class="right">
				<p class="status" :class="{'og': itme.status==2 || itme.status==3, 'os': itme.status==4, 'od': itme.status==5}"> 
					<span v-if="itme.status==2">未开始</span>
					<span v-if="itme.status==3">未开始</span>
					<span v-if="itme.status==4">进行中</span>
					<span v-if="itme.status==5">已结束</span>
				</p>
				<p class="checkdetails" @click="checkdetails(itme.ref_id, itme.id)">查看详情>></p>
			</div>
		</div>
		</div>
		<el-pagination background layout="prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 150px;">
		</el-pagination>
	</div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        keyword: '',
        state: '',
      },
      tableData: [],
      total: null,
      currentPage: 0,
	  MatchShowList: [],
	  name: this.$route.query.name
    }
  },
  created() {
    this.get_allclub()
  },
  methods: {
    onSubmit(state) {
	  this.form.state = state
      this.get_allclub()
    },
    get_allclub() {
      this.$axios.post('/UserManage/judge_com_info', {
          search: this.form.keyword,
		  user_id:this.$route.query.umpireListId,
          status: this.form.state,
          page: this.currentPage
        }, {
          headers: {
            token: window.sessionStorage.getItem('token')
          }
        })
        .then(res => {
          if (res.data.code == 2000 || res.data.code == 2001) {
            this.tableData = res.data.data
            this.total = res.data.data.length
			console.log(this.total)
			if(this.total == 0){
			  this.$message({
				type: 'success',
				message: '暂无信息'
			  })
			}
			this.MatchShowList = this.tableData.slice((this.currentPage)*10,(this.currentPage)*10+10)
          }
        })
        .catch(error => {
          console.log(error)
        });
    },
    ChangePage(page) {
	  this.currentPage = parseInt(page) - 1
	  this.MatchShowList = this.tableData.slice((page-1)*10,(page-1)*10+10)
	  console.log(this.MatchShowList)
    },
	checkdetails(matchId, id){
		this.$router.push({ path: '/index/user/umpireMatchDetails', query: { matchId: matchId , id: id} })
	}
  }
}
</script>

<style lang="less" scoped>
	.tabs{
		display: flex;
		justify-content: space-between;
		margin-top: 36px;
		margin-left: 40px;
		margin-right: 100px;
		.search{
			display: flex;
			justify-content: space-between;
			width: 300px;
			.button{
				margin-left: 16px;
			}
		}
	}
	.line {
		width: 95%;
		border-top: 1px #dcdfe6 dotted;
		margin-top: 33px;
		margin-bottom: 36px;
	}
	.matchList{
		margin-left: 40px;
		margin-right: 100px;
		.matchLists{
			display: flex;
			justify-content: space-between;
			border: 1px #dcdfe6 dotted;
			margin-bottom: 20px;
			padding: 10px;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
				p{
					margin: 10px 0;
				}
				img{
					display: inline-block;
					width: 78px;
					height: 70px;
					margin-right: 15px;
				}
				.title{
					font-weight: bold;
				}
			}
			.right{
				margin-right: 56px;
				.status{
					margin-bottom: 46px;
				}
				.checkdetails{
					cursor: pointer;
				}
			}
		}
	}
    .og {
	  border: 1px #ff8200 solid;
      color: #ff8200;
	  text-align: center;
    }
    .os {
		border: 1px #ffbd00 solid;
      color: #ffbd00;
	  text-align: center;
    }
    .od {
		border: 1px #579c00 solid;
      color: #579c00;
	  text-align: center;
    }
</style>
